<template>
  <div >
  <div class="layout-all">
    <div >
      <el-row :gutter="8">
    <el-col :xs="24" :sm="24" :lg="6">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>订单/店铺信息</span>
        </div>
        <div class="text item">
          <div>订单号 : {{ form.sn }}</div>
          <div>主订单号 : {{ form.master_sn }}</div>
          <div>
            订单状态 :
            <span v-if="form.status === 0">未支付</span>
            <span v-else-if="form.status === 1">待发货</span>
            <span v-else-if="form.status === 2">已发货</span>
            <span v-else-if="form.status === 3">已完成</span>
            <span v-else-if="form.status === 4">已取消</span>
          </div>
          <div>订单商品数量 : {{ form.goods_num }}</div>
          
          <!-- <el-divider content-position="center" style="margin:8px 0" /> -->
          <!-- <el-divider content-position="center" style="height:10px" /> -->
          <div>店铺名称 : {{ form.shop_title }}</div>
          <div>购买账号 : {{form.user==undefined?'': form.user.account }}
             <el-button-group style="padding-left: 10px;">
                <el-button type="success" size="small" round @click="money_fun(form.user_id,form.user.nickname)">资金记录</el-button>
                <el-button type="primary" size="small" round @click="commission_fun(form.user_id)">分佣记录</el-button>
              </el-button-group>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="24" :lg="6">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>收货地址</span>
        </div>
        <div class="text item">
          <div>订单ID : {{ form.id }}</div>
          <div>姓名 : {{ form.leader_name }}</div>
          <div>电话 : {{ form.user_tel }}</div>
          <div>
            <span>省份 : {{ form.province_name }}</span>
            <span style="margin-left:40px">城市 : {{ form.city_name }}</span>
            <span style="margin-left:40px">地区 : {{ form.district_name }}</span>
          </div>
          <div>详细地址 : {{ form.leader_full_address }}</div>

          <el-tag v-if="form.is_accesspay>0">收付通订单</el-tag>
          <el-tag type="success" v-if="form.is_accesspay>1">已结算</el-tag>

        </div>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="24" :lg="6">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>支付信息</span>
        </div>
        <div class="text item">
          <div>是否支付 : {{ form.is_pay === 1 ? '已支付' : '未支付' }}</div>
          <div>支付方式 : {{ form.pay_type }}</div>
          <div>支付单号 : {{ form.pay_sn }}</div>
          <div>支付时间 : {{ form.pay_time }}</div>
          <div>支付账号 : {{form.user==undefined?'': form.user.account }}</div>
          <div>支付昵称 : {{ form.user==undefined?'': form.user.nickname }}</div>
        </div>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="24" :lg="6">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>其他信息</span>
        </div>
        <div class="text item">
          <div class="flex_between">
          <div>订单总价 : {{ form.total_amount }}</div>
          <div>原始商品金额 : {{ form.goods_amount }}</div>
          </div>
          <div>结算总价 : {{ cost_price }}</div>
          <div class="flex_between">
          <div>活动优惠 : {{ form.dec_amount }}</div>
          <div v-if="form.swap_amount>0">换货抵扣 : {{ form.swap_amount }}</div>
          </div>
          <div class="flex_between">
          <div>使用余额 : {{ form.balance }}</div>
          <div>使用积分抵扣 : {{ form.integral_money }}</div>
          </div>
          <div class="flex_between">
             <div>邮费 : {{ form.postage }}</div>
             <div>优惠券抵扣 : {{ form.dec_amount }}</div>
          </div>
          <div>备注 : {{ form.remark }}</div>
        </div>
      </el-card>
          </el-col>
      </el-row>
    </div>
    <div class="order_logs">
      <el-card class="table-card">
        <div slot="header" class="clearfix">
          <span>订单日志</span>
        </div>
        <div class="table">
          <el-table tooltip-effect="dark" :data="form.order_logs">
            <el-table-column prop="content" label="操作内容" />
            <el-table-column prop="create_time" label="创建时间" />
            <el-table-column prop="update_time" label="修改时间" />
          </el-table>
        </div>
      </el-card>
    </div>
    <div class="order_logs" v-if="form.commission_logs!=undefined&&form.commission_logs.length>0">
      <el-card class="table-card">
        <div slot="header" class="clearfix">
          <span>分佣记录</span>
        </div>
        <div class="table" >
          <el-table tooltip-effect="dark" :data="form.commission_logs">
            <el-table-column align="center" prop="id" label="序号" width="70" :fixed="isMobile()?'left':undefined"/>
            <el-table-column prop="create_time" label="创建时间" width="160"/>
            <el-table-column prop="remark" label="操作内容" />
            <el-table-column prop="money" label="佣金" width="160"/>
            <el-table-column prop="user" label="领取者" >
              <template slot-scope="scope" v-if="scope.row.self_user!=undefined">
                {{scope.row.self_user.nickname+'('+scope.row.self_user.id+')'}}
              </template>
            </el-table-column>
            <el-table-column prop="user" label="领取者等级">
              <template slot-scope="scope" v-if="scope.row.self_user!=undefined">
                {{level_info[scope.row.self_user.level_id-1]+'('+scope.row.self_user.level_id+'级)'+(scope.row.self_user.proxy_id>1?(':'+proxy_info[scope.row.self_user.proxy_id-1]+'('+scope.row.self_user.proxy_id+'级)'):'')}}
              </template>
            </el-table-column>
            <el-table-column prop="self_user.account" label="账号" width="150"/>

            <el-table-column prop="status" label="状态" width="80">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status==0" round>未分</el-tag>
                <el-tag v-if="scope.row.status==1" type="success" round>已分</el-tag>
              </template>
            </el-table-column>
          <el-table-column
            align="center"
            prop="telephone"
            width="300"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button type="primary" size="mini" plain round @click="money_fun(scope.row.user_id,scope.row.self_user.nickname)">资金记录</el-button>
              <el-button type="success" round size="mini" plain @click="commission_fun(scope.row.user_id)">分佣记录</el-button>
              <el-button type="warning" round size="mini" plain @click="child_click(scope.row)">团队</el-button>
            </template>
          </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
    <div class="order_logs" v-if="form.res_pay_log!=undefined&&form.res_pay_log.length>0">
      <el-card class="table-card">
        <div slot="header" class="clearfix">
          <span>支付报文</span>
        </div>
      <el-collapse v-model="activeNames" >
        <el-collapse-item v-for="(item,index) in form.res_pay_log" :key="index" :name="item.id">
          <template slot="title">
            <el-tag :type="item.type==1?'danger':'success'">{{item.type_str}}</el-tag>
            <el-tag type="info">{{'ID:'+item.id}}</el-tag>
            <el-tag>{{'日期:'+item.create_time}}</el-tag>
            <el-tag type="warning">{{' 金额:'+item.amount}}</el-tag>
          </template>
          <div v-for="(res,i) in item.res" :key="i">
            <div><el-tag>{{i}}</el-tag>   =   <el-tag type="success">{{res}}</el-tag></div>
          </div>
        </el-collapse-item>
      </el-collapse>
      </el-card>
    </div>
    <div class="order_shop">
      <el-card class="table-card">
        <div slot="header" class="clearfix">
          <span>商品信息</span>
        </div>
        <div class="table">
         <orderGoodsList :checked="checked" :order_goods="form.order_goods" @handleSelectionChange="handleSelectionChange" />
        </div>
        <div class="order_operation">
          <el-button @click="bk()">返回</el-button>
          <el-button
            type="success"
            v-if="model=='shop'"
            :disabled="form.is_delivery_btn==0"
            @click="dialogVisible(true)"
          >发货</el-button>
          <el-button
            type="warning"
            v-if="model=='shop'"
            :disabled="form.shop_is_refund_btn==0"
            @click="re_dialogVisible(true)"
          >退款</el-button>
        </div>
      </el-card>
       
      <!-- 发货 -->
      <drawer title="发货信息" :isShow="send_dialogVisible"  @update:isShow="send_dialogVisible=false" width=".3">
          <send-dig-delivery @closeDelivery="closeDelivery" :send_goods="send_goods" :select_row="form" :print="print" :send_options="send_options"/>
      </drawer>
      <!-- 退款 -->
      <el-dialog
      title="退款信息"
      :visible.sync="refund_dialogVisible"
      :width="isMobile()?'100%':'30%'"
    >
        <el-form ref="refund_form"  :model="refund_goods" label-width="120px">
          <el-form-item v-if="refund_goods.status==1" label="快递单号(收到后请退款):" prop="is_refund">
            <el-input v-model="refund_goods.express_sn" placeholder="快递单号"></el-input>
            </el-form-item>
          <el-form-item v-if="refund_goods.status==2" label="商品已发货:" prop="is_refund">
              <el-radio-group v-model="refund_goods.is_refund_agree">
                <el-radio :label="0">拒绝退货</el-radio>
                <el-tooltip class="item" effect="dark" content="同意买家退货,收到货后再退款" placement="top-start">
                <el-radio :label="1">先退货后退款</el-radio>
                </el-tooltip>
                <el-radio :label="2">直接退款</el-radio>
              </el-radio-group>
            </el-form-item>
          <el-form-item label="是否退款:" prop="is_refund">
            <el-radio-group v-model="refund_goods.is_refund">
              <el-radio :disabled="refund_goods.status==2" :label="0">否</el-radio>
              <el-radio :disabled="refund_goods.status==2" :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="refund_goods.is_refund==0" label="拒绝退款原因:" prop="refund_refuse_note">
            <el-input v-model="refund_goods.refund_reply" type="textarea" :rows="5" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="re_dialogVisible()">取 消</el-button>
          <el-button type="primary" @click="onRefund">确 定</el-button>
        </span>
      </el-dialog>
      <drawer :title="'资金变动<'+nickname+'>'" :isShow="money_visible"  @update:isShow="money_visible=false" width=".6">
        <account-money-log v-if="money_visible" :user_id="user_id"/>
      </drawer>
      <drawer title="分佣记录" :isShow="commission_visible"  @update:isShow="commission_visible=false" width=".6">
        <commission-log v-if="commission_visible" :user_id="user_id"/>
      </drawer>
      <drawer title="下级成员" :isShow="child_visible"  @update:isShow="child_visible=false" width=".5">
      <team-list :user_id="user_id"/>
    </drawer>
    <!-- <el-divider /> -->
    </div>
  </div>
  </div>
</template>

<script>
import sendDigDelivery from './sendDigDelivery'
import orderGoodsList from './orderGoodsList'
import commissionLog from '../../components/orderlist/commissionLog'
import accountMoneyLog from '../../components/orderlist/accountMoneyLog'
import TeamList from '../../components/orderlist/TeamList'
export default {
  props:['id','model'],
  name:'orderForm',
  components: { sendDigDelivery,orderGoodsList,commissionLog,accountMoneyLog,TeamList},
  data() {
    return {
      cost_price: 0,
      user_id: 0,
      is_update: 1,
      checked: 0,
      radio_type:"快递公司",
      nickname:"",
      show_refund_img:false,
      money_visible:false,
      child_visible:false,
      commission_visible:false,
      refund_img:[],
      button_type:['primary','success','warning','info','warning','danger',''],
      button_send_type:['warning','info','success','danger','primary',''],
      button_send_str:['未支付','待发货','已发货','已完成','已取消'],
      button_r_str:['无退款','退款中','已退款','拒绝退款','取消退款'],
      button_r1_str:['无退款','存在退款','完全退款'],
      activeNames:['1'],
      print:[],
      showModal: false,
      send_goods: {},
      refund_goods: {},
      send_options: [],
      level_info: [],
      proxy_info: [],
      send_dialogVisible: false,
      refund_dialogVisible: false,
      selected_options: 0,
      options: [
        { value: 1, label: '普通订单' },
        { value: 2, label: '其他' }
      ],
      form: {user:{account:'',nickname:''}},
      send_rules: {
        express_sn: [
          { required: true, message: '请输入快递编号', trigger: 'blur' }
        ],
        express_name: [
          { required: true, message: '请输入快递公司名称', trigger: 'blur' }
        ]
      },
      refund_rules: {
        refund_refuse_note: [
          { required: true, message: '请输入退款原因', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.init_into()
    // 获取快递公司编码
    this.get('/shop/OrderGoods/express_code', name, 'POST').then(e => {
      this.send_options = e.list
    })
  },
  methods: {
    child_click(row){
      this.user_id=row.user_id
      this.child_visible=true
    },
    money_fun(id,nickname){
      this.user_id=id
      this.nickname=nickname
      this.money_visible=true
    },
    commission_fun(id){
      this.user_id=id
      this.commission_visible=true
    },
    closeDelivery(up){
       this.send_dialogVisible = false
       if(up){
         this.init_into()
         this.is_update=0
       }
        
    },
    handleSelectionChange(val) {
      // 发货参数
      this.send_goods = {
        order_goods_id: [],
        express_id: '',
        remark: '',
        express_name: '',
        goods_name: '商品',
        express_sn: ''
      }
      if (val.length >0) {
        this.send_goods.express_id = val[0].express_id==0?'':val[0].express_id

        if(val[0].express_name=="自提"){
          this.send_goods.express_sn ="自提"
          this.send_goods.express_id =0
        }
        if (val.length === 1) {
          this.send_goods.order_goods_id = val[0].id
        } else {
          val.forEach(v => {
            this.send_goods.order_goods_id.push(v.id)
          })
        }
      }
      // 退款参数
      this.refund_goods = {
        order_goods_id: [],
        is_refund: 0,
        is_refund_agree: 0,
        refund_refuse_note: ''
      }
      if (val.length ==0) {
      }else if (val.length === 1) {
        this.refund_goods.order_goods_id = [val[0].id]
      } else {
        val.forEach(v => {
          this.refund_goods.order_goods_id.push(v.id)
        })
      }
     
    },
    showRefundImg (info) {
        
        this.show_refund_img = true
        this.refund_img = info.images
    },
    dialogVisible(bn){
      if(!bn){
        this.send_dialogVisible=false
        return
      }
      if(this.send_goods.order_goods_id==undefined||this.send_goods.order_goods_id.length==0){
           this.checked++
        }
      this.send_dialogVisible=true
    },
    re_dialogVisible(bn){
      if(!bn){
        this.refund_dialogVisible=false
        return
      }
      if(this.refund_goods.order_goods_id==undefined||this.refund_goods.order_goods_id.length==0){
          this.checked++
          setTimeout(()=>{
            if(this.form.status==2&&this.form.refund_status==3)
              this.refund_goods.status=this.form.status
            else if(this.form.status==2&&this.form.refund_status>=4){
              this.refund_goods.status=1
              this.refund_goods.express_sn=this.form.order_goods[0].order_refund_logs[0].express_sn
            }else this.refund_goods.status=0
            this.refund_dialogVisible=true
          },500)
          return
        }

      if(this.form.status==2&&this.form.refund_status==3)
        this.refund_goods.status=this.form.status
      else if(this.form.status==2&&this.form.refund_status>=4){
        this.refund_goods.status=1
        this.refund_goods.express_sn=this.form.order_goods[0].order_refund_logs[0].express_sn
      }else this.refund_goods.status=0
      this.refund_dialogVisible=true
    },

    // 退款
    onRefund() {
      this.$refs['refund_form'].validate(valid => {
        console.log(this.refund_goods)
        this.get('/'+this.model+'/Order/refund', this.refund_goods, 'POST').then(e => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.refund_dialogVisible = false
          this.init_into()
          this.is_update=0
        })
      })
    },
    // 返回
    bk() {
      this.$back(this.is_update)
    },
    // 获取当前数据
    init_into() {
      this.get('/shop/Order/info?id=' + this.id, 'POST').then(e => {
        this.form = e.info.tpl
        this.print = e.print
        this.level_info = e.level_info
        this.proxy_info = e.proxy_info
        if(this.form.order_goods!=undefined){
          for(let i in this.form.order_goods){
            this.cost_price+=this.form.order_goods[i].cost_price*this.form.order_goods[i].goods_num
          }
        }
      })
    }
  }
}
</script>

<style>
.layout-all {
  margin: 10px;
}
.text {
    font-size: 14px;
    color:darkgray;
  }

.item div{
    margin-bottom: 5px;
  }
  .flex_between {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .flex_between div {
    margin-right:20px
  }
  .el-card__body {
    padding:10px;
  }
.item{
  margin-bottom: -5px;
}
.table{
  width:100%
}
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    float: left;
    margin-bottom:5px;
    height: 250px;
    width: 100%;
  }
  .table-card{
    float: left;
    margin-bottom:5px;
    width: 100%;
  }
  .order_operation{
    margin-top: 5px;
  }
  .img_btn {
    text-decoration: underline;
    color:royalblue;
    cursor: pointer;
  }
</style>
